<template>
    <div class="content">
        <Nav :title="title" :path="path"></Nav>
        <div class="header">
            <img class="pic" :src="result.pic">
            <div class="blur">
                <div class="name">{{result.title}} </div>
                <div class="country">
                    <p>{{result.labels}}</p>
                </div>
                <div class="like">
                    <span class="comment-num">{{result.evaluate}}</span> 人评论 
                </div>
            </div>
        </div>
        <div class="img">
            <img :src="result.pic">
        </div>
         <img class="collect"
             :src="result.collected?collected:collectBefore"
            @click="handleCollect(result._id)">
    </div>
</template>

<script>
    export default {
        data(){
            return{
                title:'电影详情',
                path:'/tabbar/movie',
                result:'',
                collected:require('@/assets/images/icon/collection.png'),
                collectBefore:require('@/assets/images/icon/collection-anti.png'),
                m:''
            }
        },
        mounted() {
            var{id,m} = this.$route.query
            this.m = m
            this.$http.get(`/moiveDetail?id=${id}`).then(res=>{
                this.result = res.data.details[0]
            })
        },
        methods:{
            handleCollect(id){
                this.result.collected = !this.result.collected
                var collected = this.result.collected
                var data ={id,collected}
                var m = this.m
                this.$http.post(`/collectMovie/${m}`,data)
            }
        }
    }
</script>

<style scoped>
.header{
    margin-top: 90px;
    height:400px;
    overflow: hidden;
    position: relative;
}
.pic{
    filter: blur(20px);
    width: 100%;
    position: absolute;
    top: -220px;
}
.blur{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 100;
}
.name{
    font-size: 40px;
    color: white;
    margin: 40px;
}
.country{
    color: white;
    margin-left: 40px;
    font-size: 32px;
}
.like{
    position: absolute;
    top:120%;
    left: 5%;
    font-size: 29px;
    color: white;
}
.comment-num{
    color: rgba(248, 3, 3, 0.931);
}
.img{
    width: 80px;
    height: 110px;
    position: absolute;
    right:30%;
    top: 20%;
    z-index: 101;
}
.img image{
    width: 100px;
}
.collect{
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
}
</style>